<template>
  <el-container>
    <el-header class="center" style="height: 100px;width: 1000px;">
      <div style="background-color: white">
        <el-row gutter="10">
          <el-col>

            <img src="../../assets/images/logo.png"
                 style="height: 70px; position: relative;margin-top: 20px">
            <span style="font-size: 42px;
                               margin: 30px; position: absolute;">用户注册</span>
            <span style="float: right;margin-top: 60px">已有第一车网账号？ 立即
                            <a href="">登陆</a> </span>

          </el-col>


        </el-row>

      </div>
      <hr>
    </el-header>
    <el-main class="center" style="height: 100%;">
      <el-form label-width="80px" style="margin:5% 30%;font-size: 50px;height: 398px;">

        <el-form-item label="账号">
          <el-input style="width: 80%;"
                    placeholder="请输入手机号或者邮箱  推荐使用手机号"
                    v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input style="width: 80%;"
                    placeholder="请输入密码"
                    v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input style="width: 80%;"
                    placeholder="请再次输入密码"
                    v-model="user.password1"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input style="width: 80%;"
                    placeholder="请输入昵称"
                    v-model="user.nickName"></el-input>
        </el-form-item>
        <el-form-item label="验证码" gutter="20">
          <el-input style="margin: 5px 0;width: 40%;"></el-input>
          <el-input style="margin: 5px 0;width: 40%;"></el-input>
          <a href="" style="font-size: 8px;float: right">获取验证码</a>
        </el-form-item>
        <el-form-item>
          <label><input type="checkbox"/>我已阅读
            <a href="">《第一车网服务协议》</a></label>
        </el-form-item>
        <el-form-item>

          <el-button type="primary" style="width: 80%;background-color: #f29600;color: white;" @click="reg()">立即注册</el-button>
        </el-form-item>
      </el-form>


    </el-main>
    <el-footer>
      <div style="background-color: #202024;text-align: center;color: #fff;padding: 50px 0">
        <div style="width: 1200px;height: 100px;margin: 5px auto;background-color: #202024;">
          <el-row>
            <el-col span="8">
              <p>毛孔二手车版权所有,致电10086</p>
              <p>致力于优质二手车</p>
              <p>更多详情www.MaoKong.com</p>
              <p>中山中心jsd2303</p>
            </el-col>
            <el-col span="8">
              <img src="../../assets/images/Gu1.png" style="width:100px">
              <p style="color: #ef7c00">更多详情联系微信</p>
            </el-col>
            <el-col span="8">
              <img src="../../assets/images/Gu2.png" style="width:100px">
              <p>更多详情联系微信</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "RegView",
  data: function () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      user:{userName:"",password:"",password1:"",nickName:""}
    }
  },
  methods: {
    handleSelect(key, keyPath) {//key代表的是上面index的值
      console.log(key, keyPath);
    },
    reg(){
      axios.post("/xiaoming-sso/account/user/login",v.user).then(function (response) {
        if (response.data.status==1){
          location.href="/";
        }else{
          v.$message.error(response.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
.center {
  width: 1200px;
  margin: 0 auto;
}

a {
  text-decoration: none;
}


.brand a {
  line-height: 30px;
  width: 30px;
  text-decoration: none;
  color: #333;
}

.brand a:hover {
  color: #f29600;
}

.brand p {
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 20px
}

.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border-color: #f29600;
  outline: 0;
}

.el-button--primary {
  color: #FFF;
  background-color: #f29600;
  border-color: #f29600;
}
</style>